@extends('public.mfather')
@section('content')
    <img class="fgx" src="{{asset ('templates/klw/images/5aa0def4N4412e53b.png')}}" alt="" />
    <div class="tuijian">
        <div class="left">
            @article(['orderBy'=>'sort','take'=>1])
            <a href="{{route('show',$a['id'])}}"><img class="animated slideInDown" style="width:100%;height:100%;" src="{{$a['face']}}" alt=""></a>
            @endarticle
        </div>
        <div class="right">
            <div class="top">
                @article(['orderBy'=>'sort','skip'=>1,'take'=>1])
                <a href="{{route('show',$a['id'])}}"><img class="animated slideInDown" style="width:100%;height:100%;" src="{{$a['face']}}" alt=""></a>
                @endarticle
            </div>
            <div class="bottom">
                @article(['orderBy'=>'sort','skip'=>2,'take'=>1])
                <a href="{{route('show',$a['id'])}}"><img class="animated slideInDown" style="width:100%;height:100%;" src="{{$a['face']}}" alt=""></a>
                @endarticle
            </div>
        </div>
    </div>
    <div class="tuijian2">
        <div class="left">
            @article(['orderBy'=>'sort','skip'=>3,'take'=>1])
            <a href="{{route('show',$a['id'])}}"><img class="animated slideInDown" style="width:100%;height:100%;" src="{{$a['face']}}" alt=""></a>
            @endarticle
        </div>
        <div class="right">
            @article(['orderBy'=>'sort','skip'=>4,'take'=>1])
            <a href="{{route('show',$a['id'])}}"><img class="animated slideInDown" style="width:100%;height:100%;" src="{{$a['face']}}" alt=""></a>
            @endarticle
        </div>
    </div>
    <!--店铺-->
    @if($shops)
        @foreach($shops as $shop)
            <div class="shop animated bounceIn">
                <div class="face">
                    @if($shop->link)
                        <a href="{{$shop->link}}"><img src="{{$shop->face}}" /></a>
                    @else
                        <a href="{{route('show',$shop->id)}}"><img src="{{$shop->face}}" /></a>
                    @endif
                </div>
                <div class="introduct">
                    <h3>{{$shop->name}}</h3>
                    <p>经营范围：{{$shop->run}}</p>
                    <div style="width:100%;height:6vw;line-height: 6vw;"><i style="float:left;"><img style="width:6vw;" src="{{asset ('images/dingwei.png')}}" alt=""></i><span class="juli" style="line-height: 6vw;float:left;color:#999;"></span></div>
                </div>
                <span class="position" hidden>{{$shop->position}}</span>
            </div>
        @endforeach
        {{$shops->links('vendor.pagination.bootstrap-4')}}

    @else

    @endif
    <div id="container" hidden>

    </div>
@endsection
@section('scripts')
    <script>
        $(function(){
            //获取当前手机位置
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function(r){
                if(this.getStatus() == BMAP_STATUS_SUCCESS){
                    var mk = new BMap.Marker(r.point);
                    $('.shop').each(function(){
                        var position=$(this).find('.position').html();
                        var km=juli(position);
                        var map = new BMap.Map("container");
                        var ins=(map.getDistance(km,r.point)/1000).toFixed(2);
                        $(this).find('.juli').html(ins+'km');
                    });
                }
                else {
                    alert('failed'+this.getStatus());
                }
            },{enableHighAccuracy: true});
            function juli(position){
                var p=position;
                var p=p.split(",");
                var x=p[0];
                var y=p[1];
                var pointA = new BMap.Point(x,y);
                return pointA;
            }
        });
    </script>
@endsection